<template>
	<!-- 搜索栏 start -->
	<el-row>
	    <el-col :span="5">
			<div class="grid-content ep-bg-purple-dark" >
				 <el-input v-model.trim="kw"
				  placeholder="请输入姓名或手机号或身份证号" class="w-100 m-2"/>
			</div>
		</el-col>
		<el-col :span="1">
		</el-col>
		<el-col :span="4" class="m-2">
			<el-button type="primary" @click="loadData(1)" >查询</el-button>
		</el-col>
		<el-col :span="10">			
		</el-col>
	</el-row>
	<div style="margin-top: 40px;"></div>
	<!-- 搜索栏 end -->
	<!-- 表格栏 start -->
	<el-row class="m-2">
		<el-col :span="24">
			<el-table :data="data.records" style="width:100%;"
			 v-loading="loading">
			    <el-table-column fixed prop="caseNumber" label="病历号" align="center" width="80" />
			    <el-table-column prop="realName" label="姓名"  align="center" />
			    <el-table-column prop="gender" label="性别"  align="center" />
				<el-table-column prop="idNumber" label="身份证"  align="center" />
				<el-table-column prop="visitDate" label="挂号日期"  align="center" />
				<el-table-column prop="noon" label="午别"  align="center" />
				<el-table-column prop="deptName" label="科室"  align="center" />
				<el-table-column prop="doctorName" label="医生"  align="center" />
				<el-table-column prop="registName" label="号别"  align="center" />
				<el-table-column fixed="right" label="Operations"  align="center" >
			      <template #default="scope">
			        <!-- <el-button link type="primary" @click="showEdit(scope.row)">编辑</el-button> -->
					<el-button link type="danger" @click="del(scope.row.id)">退号</el-button>
			      </template>
			    </el-table-column>
			  </el-table>
		</el-col>
	</el-row>

	<!-- 表格栏 end -->
	<div style="margin-top: 20px;"></div>

	<el-row>
		<!-- <el-pagination
		background layout="prev, pager, next"
		:total="1000" :page-count="10"></el-pagination> -->
	
		<el-col :span="20">
			<el-pagination background layout="prev, pager, next" 
			:total="1" :page-count="data.pages"
			@current-change="handleCurrentChange"/>
		</el-col>
		<el-col :span="4">
			<el-select v-model="ps" class="w-20 m-2" placeholder="每页行数" @change="loadData(1)" >
			    <el-option  
					v-for="item in pageSizes"
					:key="item"
					:label="item"
					:value="item" />
			  </el-select>
		</el-col>
	</el-row>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { fetchData,postReq } from '../../utils/api'
import router from '../../router';
import { ElMessageBox } from 'element-plus'
import { formatGender } from '../../utils/utils'

//data start
const loading=ref(false)
const data = ref({
  records:[]
})
//搜索框
const kw=ref('')
//每页行数
const ps=ref(10)
const pageSizes=[10,20,30,50]

//表单对象
const editform = ref({
  "id": 0,
  "realName": "",
  "gender": "",
  "idnumber": "",
  "birthdate": "",
  "phone": "",
  "createDate": "",
  "channel": "",
  "delMark": 1
});

onMounted(async () => {
  loadData(1)
});

//加载数据
async function loadData(pn) {
  loading.value = true;
  let url = `/register/page?count=${ps.value}&pn=${pn}`;

  if (kw !== '') {
    url += `&keyword=${kw.value}`;
  }	
// //心血管内科  
//   url +=  `&deptId=1&docId=2`

  try {
	const result = await fetchData(url,null);
	console.log(result)
	if(result.result){
		data.value = result.data
		loading.value=false
	}else{
		if(result.errMsg=='未登录')
			router.push('/login')
	}	
} catch (error) {
  console.error("Error fetching data:", error);
}

}

//分页
function handleCurrentChange (number)  {
	loadData(number)
}

function del(id){
	ElMessageBox.confirm(
	    '确认是否删除?',
	    'Warning',
	    {
	      confirmButtonText: 'OK',
	      cancelButtonText: 'Cancel',
	      type: 'warning',
	    }
	  )
	.then(() => {
		var formData = new FormData();
		formData.append("id", id);
		console.log("模拟删除掉！")
		postReq("/register/del",formData).then(resp=>{
			if(resp.data.result){
				loadData(data.value.current)
				ElMessageBox.alert('删除成功', '提示',{})
				
			}else{
				if(result.errMsg=='未登录')
					router.push('/login')
				ElMessageBox.alert(resp.data.errMsg, '提示',{})
			}
		})
	})
}


</script>

<style>
</style>